<template>
  <!--创建新的活动-->
  <div>
    <el-form v-loading="isInsertTask"
             ref="elForm" :model="formData" :rules="rules" size="medium" label-width="110px"
            label-position="left">
            <el-form-item label="分发标题" prop="title">
              <el-input v-model="formData.title" placeholder="请输入分发标题" :maxlength="11"
                show-word-limit clearable
                suffix-icon='el-icon-discount' :style="{width: '100%'}"></el-input>
            </el-form-item>
            <el-form-item label="添加关联视频" prop="addVideos">
                  <el-button @click="drawer = true">
                     选择视频
                  </el-button>
                  <span v-show="formData.addVideos.length >0">
                    共<span>{{formData.addVideos.length  }}</span>个视频
                  </span>
            </el-form-item>

            <el-form-item label="视频标题" prop="videoTitle" style="">
              <el-input v-model="formData.videoTitle" type="textarea" placeholder="支持多个标题，在输入框内按回车新增多个标题"
                :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
            </el-form-item>

            <el-form-item label="视频话题" prop="videoTopic">
              <el-input v-model="formData.videoTopic" type="textarea" placeholder="输入多个话题，多个话题用空格隔开"
                :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
            </el-form-item>
            <el-form-item label="视频挂载" prop="mountStyle">
              <el-radio-group v-model="formData.mountStyle" size="medium">
                <el-radio v-for="(item, index) in mountStyleOptions" :key="index" :label="item.value"
                  :disabled="item.disabled">{{item.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="扫码分发形式" prop="destination">
              <el-radio-group v-model="formData.destination" size="medium">
                <el-radio v-for="(item, index) in destinationOptions" :key="index" :label="item.value"
                  :disabled="item.disabled" border>{{item.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
    </el-form>
    <el-row :gutter="20" slot="footer">
      <el-col :span="12" :offset="16">
        <el-button @click="close">取消</el-button>
        <el-button v-loading="isInsertTask" type="primary" @click="handleConfirm">确定</el-button>
      </el-col>
    </el-row>
    <el-drawer
      title=""
      size='60%'
      :visible.sync="drawer"
      :direction="direction"
      :show-close="true"
      :modal-append-to-body="false"
      :before-close="handleClose">
      <el-row>
        <shareSpace ref="shareSpace" :isCreating="true"/>
      </el-row>
      <el-row type="flex" justify="end">
        <el-col :span="6">
          <el-button v-loading="isBinding" type="primary" @click="handleDrawerConfirm" plain>确定</el-button>
          <el-button  @click="closeDrawer">取消</el-button>
        </el-col>
      </el-row>
    </el-drawer>
</div>


</template>
<script>
import { addTask } from "@/api/tuike/qrCode"
import { user } from "../../../store"
import item from "@/layout/components/Sidebar/Item.vue";
import {getVideosFromFolderAndFile, queryFileList} from "@/api/tuike/folder";

export default {
    name: "qrCodeCreate",
    components: {
      shareSpace:()=> import ('../videoFiles/index.vue')
    },
    data() {
        return {
          rules: {
              title: [{
                required: true,
                message: '请输入分发标题',
                trigger: 'blur'
              }],
              videoTitle: [{
                required: true,
                message: '支持多个标题，在输入框内按回车新增多个标题',
                trigger: 'blur'
              }],
              videoTopic: [{
                required: true,
                message: '输入多个话题，多个话题用空格隔开',
                trigger: 'blur'
              }],
              mountStyle: [{
                required: true,
                message: '视频挂载不能为空',
                trigger: 'blur'
              }],
              destination: [{
                required: true,
                message: '扫码分发形式不能为空',
                trigger: 'blur'
              }],
          },
          mountStyleOptions: [{
            "label": "不挂载",
            "value": 1
          }, {
            "label": "挂载到POI地址",
            "value": 2
          }, {
            "label": "挂载到小程序",
            "value": 3
          }],
          destinationOptions: [{
          "label": "分发到抖音发布页",
          "value": "toPublish"
          }, {
              "label": "分发到编辑页",
              "value": "toEditor"
          }],
          formData: {
            title: '',
            videoTitle: undefined,
            addVideos:[],
            videoTopic: '',
            taskStatus: '0',
            mountStyle: 1,
            destination: 'toPublish',
          },
          drawer: false,
          direction: 'rtl',
          user:'',
          isBinding:false,
          isInsertTask:false
        };
    },
    methods: {
      handleClose(done) {
        //检查是否选择了视频
        if(this.formData.addVideos.length===0){
          this.$message({message:"还没有绑定视频", type:"warning"})
        }
        this.drawer = false
        this.isInsertTask=false
        this.isInsertTask=false
      },
      close(){
        this.formData = {
            title: '',
            videoTitle: undefined,
            addVideos:[],
            videoTopic: '',
            taskStatus: '0',
            mountStyle: 1,
            destination: 'toPublish',
          }
      },
      handleConfirm(){
        this.$refs.elForm.validate(valid=>{
          if(!valid){
            this.$message({message:"请检查输入内容",type:"error"});
          }else{
            this.formData.taskCreateUserId = this.$store.state.user.id
            this.formData.taskCreateUserName = this.$store.state.user.name
            this.formData.videoTotalCount = this.formData.addVideos.length
            this.isInsertTask = true
            addTask(this.formData)
              .then(response => {
                this.$message({
                  message: '创建成功',
                  type: 'success'
                })
                this.isInsertTask = false
                this.$emit('update:visible', false);
              })
          }
        })
      },
      closeDrawer(){
        const fileAndFolderList = this.$refs.shareSpace.fileAndFolderList;
        fileAndFolderList.forEach(item=> item.selected = false)
        this.drawer = false;
      },
      handleDrawerConfirm(){
        // 这里可以访问 shareSpace 组件的数据
        const selectedFileAndFolder  = this.$refs.shareSpace
                                            .fileAndFolderList
                                            .filter(item=>{return item.selected})
        if(selectedFileAndFolder.length < 1){
          this.$message({message:"请选择要绑定的活动视频",type:"error"});
        }else {
          this.isBinding=true
          getVideosFromFolderAndFile(selectedFileAndFolder)
            .then(response =>{
              this.formData.addVideos = response.data
              this.isBinding=false;
              this.drawer = false;
            })
            .catch(err=>{
              this.isBinding = false;
              console.log(err)
            })
        }
      },
      resetFields(){
        this.close();
      },
    },
    created() {
    },
 };
 </script>
